<template>
  <div class="sidebar">
    <img src="@img/header_logo.png" alt="" />
    <div class="mt-60px mb-50px text-14px">账号：hsc123</div>
    <!-- 菜单 -->
    <div class="w-full pl-50px pr-6px">
      <div
        v-for="menu in menus"
        :key="menu.name"
        class="mb-20px cursor-pointer hover:text-[var(--primary-color)] duration-300 text-14px flex items-center gap-10px"
        :class="$route.path === menu.path ? 'active' : ''"
        @click="handleClick(menu.path)"
      >
        <div class="flex items-center gap-10px">
          <img :src="img" alt="" class="w-20px h-20px" />
          <span>{{ menu.name }}</span>
        </div>
      </div>
    </div>

    <!-- 退出登录 -->
    <div class="flex-1 w-full flex items-end justify-center">
      <a-button type="primary" shape="round" class="w-80%">退出登录</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import img from "@img/51_play_n.png";
import { useRouter } from "vue-router";

const router = useRouter();

const menus = [
  {
    name: "帖子管理",
    path: "/postManage",
  },
  {
    name: "发布帖子",
    path: "/publishManage",
  },
  {
    name: "草稿箱",
    path: "/draftManage",
  },
  {
    name: "媒体列表",
    path: "/mediaList",
  },
];

const handleClick = (path: string) => {
  router.push(path);
};
</script>

<style lang="less" scoped>
.sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 70px;
  padding-bottom: 40px;
  user-select: none;
  .active {
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    &::after {
      content: "";
      width: 1px;
      height: 20px;
      background-color: var(--primary-color);
      border-radius: 10px;
    }
  }
}
</style>
